<template>
  <div class="mt-4 sku-table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="color" label="颜色" width="80" align="center"> 红色 </el-table-column>

      <el-table-column prop="size" label="尺码" width="80" align="center"> D </el-table-column>

      <el-table-column prop="sku" label="SKU" width="100">
        <template #default="{ row }">
          <el-input v-model="row.sku" />
        </template>
      </el-table-column>

      <el-table-column prop="saleable" width="120" label="是否可售" align="center">
        <template #default="{ row }">
          <el-switch v-model="row.saleable" />
        </template>
      </el-table-column>

      <el-table-column prop="originalPrice" label="原价">
        <template #header>
          <div class="price-header">
            <span>原价</span>
            <el-button
              type="primary"
              plain
              link
              color="#3721FF"
              size="small"
              @click="handleBatchEdit"
            >
              <span>批量修改</span>
              <Icon icon="material-symbols:edit-note" />
            </el-button>
            <!-- <el-input v-model="batchEdit.originalPrice" placeholder="请输入原价">
              <template #suffix>元</template>
            </el-input> -->
          </div>
        </template>
        <template #default="{ row }">
          <el-input class="pr-2" v-model="row.originalPrice">
            <template #suffix>元</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="discountPrice" label="折扣价">
        <template #default="{ row }">
          <el-input class="pl-2" v-model="row.discountPrice">
            <template #suffix>元</template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'

interface SkuItem {
  color: string
  size: string
  sku: string
  saleable: boolean
  originalPrice: string
  discountPrice: string
}

const tableData = ref<SkuItem[]>([
  { color: '红色', size: 'S', sku: '', saleable: true, originalPrice: '', discountPrice: '' },
  { color: '红色', size: 'M', sku: '', saleable: true, originalPrice: '', discountPrice: '' }
])

const batchEdit = reactive({
  originalPrice: ''
})

const addRow = () => {
  tableData.value.push({
    color: '',
    size: '',
    sku: '',
    saleable: true,
    originalPrice: '',
    discountPrice: ''
  })
}

const removeRow = (index: number) => {
  tableData.value.splice(index, 1)
}

const handleBatchEdit = () => {
  if (batchEdit.originalPrice) {
    tableData.value.forEach((item) => {
      item.originalPrice = batchEdit.originalPrice
    })
  }
}
</script>

<style scoped lang="scss">
.sku-table-container {
  max-width: 800px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.price-header {
  display: flex;
  align-items: center;
}

.add-row {
  margin-top: 15px;
  text-align: center;
}

:deep(.el-table .cell) {
  padding: 8px 0;
}

:deep(.el-input__suffix) {
  display: flex;
  align-items: center;
  margin-right: 5px;
  color: #999;
}
</style>
